<template>
  <div>
    <div>
      <el-button type="" size="mini" @click="onColor">选择款式颜色</el-button>
      <el-button
        :disabled="!tableData.length"
        type=""
        size="mini"
        @click="onSize"
        >尺码管理</el-button
      >
    </div>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      size="mini"
    >
      <el-table-column
        prop="customer_purchase_order_number"
        label="批次"
        width="100"
      >
        <template slot-scope="{ row, $index }">
          <el-input
            v-model="row.customer_purchase_order_number"
            placeholder=""
            size="mini"
            @input="onInput($event, row, $index)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="款号"> </el-table-column>
      <el-table-column prop="name" label="款名"> </el-table-column>
      <el-table-column prop="colour_value" label="款式颜色">
        <template slot-scope="{ row }">
          <div style="display: flex; align-items: center">
            <div
              :style="{
                background: '#' + Number(row.colour_value).toString(16),
              }"
              style="width: 20px; height: 20px"
            ></div>
            <div style="margin-left: 10px">
              {{ row.colour }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="img" label="款式图片">
        <template slot-scope="{ row }">
          <el-image
            :src="row.img"
            fit="contain"
            style="width: 60px; height: 60px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="detail_category" label="设计分类">
      </el-table-column>
      <el-table-column prop="delivery_date" label="内部交期" width="160">
        <template slot-scope="{ row, $index }">
          <el-date-picker
            style="width: 130px"
            v-model="row.delivery_date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @input="onInputDelivery($event, row, $index)"
            :clearable="false"
            size="mini"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="creation_time" label="下单日期" width="160">
        <template slot-scope="{ row, $index }">
          <el-date-picker
            style="width: 130px"
            v-model="row.creation_time"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @input="onInputCreation($event, row, $index)"
            :clearable="false"
            size="mini"
          >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column
        :prop="item.size"
        :label="item.size"
        v-for="(item, index) in tableDataTitle"
        :key="index"
        width="140"
      >
        <template slot="header" slot-scope="{ row, $index }">
          <div>
            {{ item.size }}
            <i
              class="el-icon-delete pointer"
              @click="onDeleteHeader(row, $index, index)"
            ></i>
          </div>
        </template>
        <template slot-scope="{ row, $index }">
          <el-input
            style="width: 110px"
            v-model="row.size[index].count"
            placeholder=""
            size="mini"
            type="number"
            @input="onInputSize($event, row, $index, index)"
            v-if="row.size[index].export_order_item_id"
          ></el-input>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="汇总" prop="count_all"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ $index }">
          <el-button
            type="text"
            size="mini"
            @click="onDeleteRow($index)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="选择款式颜色"
      :visible.sync="dialogVisible"
      width="800"
      :before-close="handleClose"
      :modal="false"
    >
      <div>
        <div style="margin-bottom: 20px">
          <el-input
            v-model="formKS.number"
            placeholder="请输入款号"
            size="mini"
            clearable
            ><el-button
              slot="append"
              icon="el-icon-search"
              @click="onSearchKS"
            ></el-button
          ></el-input>
        </div>
        <el-table
          :data="listKS"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          size="mini"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="number" label="款号" width="180">
          </el-table-column>
          <el-table-column prop="name" label="款名" width="180">
          </el-table-column>
          <el-table-column prop="colour" label="颜色"> </el-table-column>
          <el-table-column prop="suit_number" label="套装编码">
          </el-table-column>
        </el-table>
        <pagination
          :form="formKS"
          :total="totalKS"
          @paginationPostOrderTaskList="postAdminOperategettypecolor"
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          :disabled="!multipleSelectionKS.length"
          @click="onSubmitColor"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="选择款式尺码"
      :visible.sync="dialogVisibleCM"
      width="800"
      :before-close="handleClose"
      :modal="false"
    >
      <div>
        <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          :data="listCM"
          border
          style="width: 100%"
          @selection-change="handleSelectionChangeCM"
          size="mini"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column prop="number" label="设计编码" width="180">
          </el-table-column>
          <el-table-column prop="name" label="设计名称" width="180">
          </el-table-column>
          <el-table-column prop="size" label="尺码"> </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          :disabled="!multipleSelectionCM.length"
          @click="onSubmitSize"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="buttonB">
      <div class="buttonB-save pointer" @click="onSave">保 存</div>
    </div>
  </div>
</template>

<script>
import {
  postAdminOperategettypecolor,
  postAdminOperategettypesize,
  postAdminOperatesetconfirm,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      dialogVisible: false,
      dialogVisibleCM: false,
      formKS: {
        number: "",
        page: 1,
        size: 10,
      },
      totalKS: 0,
      listKS: [],
      listCM: [],
      multipleSelectionKS: [],
      multipleSelectionCM: [],
      tableDataTitle: [],
      tableData: [],
    };
  },
  methods: {
    // 保存
    async onSave() {
      let { tableData } = this;
      if (tableData.length) {
        let data = {
          count: "",
          comment: "",
          type: 1,
          arrlist: [],
        };
        let number = 0;
        for (let index = 0; index < tableData.length; index++) {
          let obj = {
            t_id: tableData[index].t_id,
            id: tableData[index].id,
            delivery_date: tableData[index].delivery_date,
            customer_purchase_order_number:
              tableData[index].customer_purchase_order_number,
            size: tableData[index].size,
          };
          data.arrlist.push(obj);
          if (tableData[index].count_all) {
            number = number + Number(tableData[index].count_all);
          }
        }
        data.count = number;
        try {
          let res = await postAdminOperatesetconfirm(data);
          this.$message.success("成功");
          this.$router.push({
            name: "OperationalDepartmentOrderListDetail",
            query: {
              id: res.export_order_id,
            },
          });
          this.dialogVisible = false;
          this.dialogVisibleCM = false;
          this.formKS = {
            number: "",
            page: 1,
            size: 10,
          };
          this.totalKS = 0;
          this.listKS = [];
          this.listCM = [];
          this.multipleSelectionKS = [];
          this.multipleSelectionCM = [];
          this.tableDataTitle = [];
          this.tableData = [];
        } catch (error) {}
      } else {
        this.$message.warning("请选择款式颜色");
      }
    },
    onDeleteRow(index) {
      let { tableData } = this;
      tableData.splice(index, 1);
      this.tableData = tableData;
    },
    onDeleteHeader(row, index, idx) {
      let { tableDataTitle, tableData } = this;
      tableDataTitle.splice(idx, 1);
      this.tableDataTitle = tableDataTitle;
      for (let index = 0; index < tableData.length; index++) {
        tableData[index].size.splice(idx, 1);
      }
      this.tableData = tableData;
      this.countall();
    },
    onInput(e, row, index) {
      let { tableData } = this;
      let tmpObj = tableData[index];
      tmpObj.customer_purchase_order_number = e;
      this.$set(this.tableData, index, tmpObj);
    },
    onInputDelivery(e, row, index) {
      let { tableData } = this;
      let tmpObj = tableData[index];
      tmpObj.delivery_date = e;
      this.$set(this.tableData, index, tmpObj);
    },
    onInputCreation(e, row, index) {
      let { tableData } = this;
      let tmpObj = tableData[index];
      tmpObj.creation_time = e;
      this.$set(this.tableData, index, tmpObj);
    },
    onInputSize(e, row, index, idx) {
      let { tableData } = this;
      let tmpObj = tableData[index];
      tmpObj.size[idx].count = e;
      this.$set(this.tableData, index, tmpObj);
      this.countall();
    },
    countall() {
      let { tableData } = this;
      tableData.forEach((e) => {
        let num = 0;
        let size = e.size;
        for (let index = 0; index < size.length; index++) {
          if (size[index].count) {
            num = num + Number(size[index].count);
          }
        }
        e.count_all = num;
      });
      this.tableData = tableData;
    },
    onSubmitColor() {
      let nowDate = new Date();
      let year = nowDate.getFullYear();
      let month =
        nowDate.getMonth() + 1 < 10
          ? "0" + (nowDate.getMonth() + 1)
          : nowDate.getMonth() + 1;
      let day =
        nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
      let dateStr = year + "-" + month + "-" + day;
      let { tableData, multipleSelectionKS, tableDataTitle } = this;
      for (let index = 0; index < multipleSelectionKS.length; index++) {
        multipleSelectionKS[index].customer_purchase_order_number = "001";
        multipleSelectionKS[index].delivery_date = "";
        multipleSelectionKS[index].creation_time = dateStr;
        multipleSelectionKS[index].count_all = 0;
        if (tableDataTitle.length > 0) {
          multipleSelectionKS[index].size = [];
          for (let idx = 0; idx < tableDataTitle.length; idx++) {
            if (multipleSelectionKS[index].t_id == tableDataTitle[idx].t_id) {
              let obj = {
                id: tableDataTitle[idx].id,
                size_number: tableDataTitle[idx].size_number,
                count: "",
                export_order_item_id: tableDataTitle[idx].id,
              };
              multipleSelectionKS[index].size.push(obj);
            } else {
              let obj = {
                id: tableDataTitle[idx].id,
                size_number: tableDataTitle[idx].size_number,
                count: "",
                export_order_item_id: "",
              };
              multipleSelectionKS[index].size.push(obj);
            }
          }
        }
      }

      tableData.push(...multipleSelectionKS);
      this.tableData = tableData;
      this.handleClose();
    },
    onColor() {
      this.dialogVisible = true;
      this.postAdminOperategettypecolor(this.formKS);
    },
    // 款式颜色搜索
    onSearchKS() {
      this.formKS.page = 1;
      this.postAdminOperategettypecolor(this.formKS);
    },
    handleSelectionChange(val) {
      this.multipleSelectionKS = val;
    },
    handleClose() {
      this.multipleSelectionKS = [];
      this.multipleSelectionCM = [];
      this.formKS = {
        number: "",
        page: 1,
        size: 10,
      };
      this.dialogVisible = false;
      this.dialogVisibleCM = false;
    },
    async postAdminOperategettypecolor(val) {
      let data = val;
      let res = await postAdminOperategettypecolor(data);
      this.listKS = res.data;
      this.totalKS = Number(res.total);
    },
    // 尺码管理
    onSize() {
      this.postAdminOperategettypesize();
      this.dialogVisibleCM = true;
    },
    onSubmitSize() {
      let { multipleSelectionCM, tableData } = this;
      this.tableDataTitle = multipleSelectionCM;
      tableData.forEach((e) => {
        if (!e.size) {
          e.size = [];
          for (let index = 0; index < multipleSelectionCM.length; index++) {
            if (e.t_id == multipleSelectionCM[index].t_id) {
              let obj = {
                id: multipleSelectionCM[index].id,
                size_number: multipleSelectionCM[index].size_number,
                count: "",
                export_order_item_id: multipleSelectionCM[index].id,
              };
              e.size.push(obj);
            } else {
              let obj = {
                id: multipleSelectionCM[index].id,
                size_number: multipleSelectionCM[index].size_number,
                count: "",
                export_order_item_id: "",
              };
              e.size.push(obj);
            }
          }
        } else {
          let size = e.size;
          for (let index = 0; index < size.length; index++) {
            let is = multipleSelectionCM.some((ele) => {
              return ele.id == size[index].id;
            });
            if (!is) {
              size.splice(index, 1);
            }
          }
          e.size = size;
          console.log("size", size);
          multipleSelectionCM.forEach((row) => {
            let is = size.some((val) => val.id == row.id);
            console.log("is", is);
            console.log("row.id", row.id);
            if (!is) {
              if (e.t_id == row.t_id) {
                let obj = {
                  id: row.id,
                  size_number: row.size_number,
                  count: "",
                  export_order_item_id: row.id,
                };
                e.size.push(obj);
              } else {
                let obj = {
                  id: row.id,
                  size_number: row.size_number,
                  count: "",
                  export_order_item_id: "",
                };
                e.size.push(obj);
              }
            }
          });
        }
      });
      this.handleClose();
      this.tableData = tableData;
      console.log("tableData---------->", tableData);
    },
    handleSelectionChangeCM(val) {
      this.multipleSelectionCM = val;
    },
    async postAdminOperategettypesize() {
      let { tableData, tableDataTitle } = this;
      this.multipleSelectionCM = tableDataTitle;
      let numberarr = [];
      for (let index = 0; index < tableData.length; index++) {
        numberarr.push(tableData[index].t_id);
      }
      let data = {
        numberarr,
        page: 1,
        size: 1000,
      };
      let res = await postAdminOperategettypesize(data);
      let listCM = res.data;
      this.listCM = listCM;
      this.$nextTick(function () {
        tableDataTitle.forEach((e) => {
          listCM.forEach((row, index) => {
            if (row.id == e.id) {
              this.$refs.multipleTable.toggleRowSelection(
                this.listCM[index],
                true
              );
            }
          });
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.buttonB {
  font-size: 14px;
  position: fixed;
  bottom: 40px;
  right: 40px;
  .buttonB-save {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    background: #2c70d6;
    color: #fff;
  }
}
</style>